<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- SITE META -->
    <title>我的素材-素材分享网</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">

    <!-- FAVICONS -->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">

    <!-- TEMPLATE STYLES -->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!-- CUSTOM STYLES -->
    <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
    <link rel="stylesheet" type="text/css" href="css/flexslider.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/xtiper.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body class="">

    <!-- START SITE -->
    <div id="wrapper">

        <div th:replace="common/bar::#cbp-spmenu-s1"></div>

        <div th:replace="common/bar::#common-header"></div>

        <section class="section single-wrap">
            <div class="container">
                <div class="page-title public-profile-title">
                    <div class="row">
                        <div class="col-sx-12 text-center">
                            <h3>我的素材</h3>
                            <div class="bread">
                                <ol class="breadcrumb">
                                    <li><a href="index">首页</a></li>
                                    <li class="active">我的素材</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <div th:replace="common/bar::#common-top"></div>

                <div class="content boxs" style="min-height: 200px">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="storelist panel panel-info">
                                <div class="panel-body">
                                    <h3 th:if="${materialVos.size() == 0}">
                                        <i class="fa fa-smile-o"></i> 还未上传任何素材 ~
                                    </h3>
                                    <div class="form-group row wow fadeIn" th:each="materialVo:${materialVos}">
                                            <div class="col-sm-2 col-xs-12">
                                                <a th:href="@{material(id=${materialVo.material.id})}"><img alt="" class="img-responsive img-thumbnail" th:src="${materialVo.material.img}"></a>
                                            </div>
                                            <div class="col-sm-4 col-xs-12">
                                                <h4><a th:href="@{material(id=${materialVo.material.id})}" th:text="${materialVo.material.name}"></a></h4>
                                                <ul>
                                                    <li th:if="${materialVo.kind != null}"><a href="#"><i class="fa fa-tasks"></i>分类： [[${materialVo.kind.name}]]</a></li>
                                                    <li th:if="${materialVo.kind == null}"><a href="#"><i class="fa fa-tasks"></i>分类： 无</a></li>
                                                    <li><a href="#"><i class="fa fa-eye"></i>阅读： [[${materialVo.material.readCount}]]</a></li>
                                                    <li><a href="#"><i class="fa fa-download"></i>下载： [[${materialVo.material.downloadCount}]]</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-3 col-xs-12">
                                                    <h4>更多信息</h4>
                                                <ul>
                                                    <li>大小 : [[${materialVo.material.size}]]</li>
                                                    <li>日期 : [[${#dates.format(materialVo.material.publishTime,'yyyy-MM-dd HH:mm:ss')}]]</li>
                                                    <li>扩展名 : [[${materialVo.material.extension}]]</li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-3 col-xs-12 text-center">
                                                <ul>
                                                    <li>
                                                        <a href="javaScript:void(0)" th:onclick="showEditMaterial   ([[${materialVo.material.id}]],[[${materialVo.material.name}]],[[${materialVo.material.info}]])" title="编辑" class="btn btn-sm btn-success"><i style="color: white" class="fa fa-edit"></i></a>
                                                        <a href="javaScript:void(0)" th:onclick="downloadMaterial([[${materialVo.material.id}]])" th:title="${'下载量：'+materialVo.material.downloadCount}" class="btn btn-sm btn-primary"><i style="color: white" class="fa fa-download"></i></a>
                                                        <a href="javaScript:void(0)" th:onclick="intoTrash([[${materialVo.material.id}]])" class="btn btn-sm btn-danger" title="移入回收站"><i style="color: white" class="fa fa-trash"></i></a>
                                                    </li>
                                                    <li>累计下载 [[${materialVo.material.downloadCount}]] 次</li>
                                                    <li>
                                                        <div class="rating">
                                                            <span th:if="${materialVo.starAvg == null}">
                                                                暂无评分
                                                            </span>
                                                            <span th:if="${materialVo.starAvg == 1}">
                                                                <i class="fa fa-star"></i>
                                                            </span>
                                                            <span th:if="${materialVo.starAvg == 2}">
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                            </span>
                                                            <span th:if="${materialVo.starAvg == 3}">
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                            </span>
                                                            <span th:if="${materialVo.starAvg == 4}">
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                            </span>
                                                            <span th:if="${materialVo.starAvg == 5}">
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                                <i class="fa fa-star"></i>
                                                            </span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div><!-- end form-group -->
                                </div><!-- end panel body -->
                            </div><!-- end storelist -->
                        </div><!-- end col -->
                    </div><!-- end row -->
                </div><!-- end content -->

                <div class="content-after text-center boxs" th:if="${materialVos.size() > 0}">
                    <div class="row">
                        <div class="col-md-12">
                            <nav class="pagination-wrapper">
                                <ul class="pagination">
                                    <li th:if="${page != 1}">
                                        <a th:href="@{my-material(page=1)}" aria-label="Next">
                                            <span aria-hidden="true">&laquo; 首页</span>
                                        </a>
                                    </li>
                                    <li th:if="${page > 2}"><a th:href="@{my-material(page=${page -1})}">[[${page-1}]]</a></li>
                                    <li class="active"><a>[[${page}]]</a></li>
                                    <li th:if="${page < (totalPage -1)}"><a th:href="@{my-material(page=${page +1})}">[[${page + 1}]]</a></li>
                                    <li th:if="${page != totalPage}">
                                        <a th:href="@{my-material(page=${totalPage})}" aria-label="Next">
                                            <span aria-hidden="true">尾页 &raquo;</span>
                                        </a>
                                    </li>
                                    <li class="disabled">
                                        <span>共：[[${totalPage}]] 页</span>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div><!-- end row -->
                </div><!-- end content after -->

                <br>

                <div th:replace="common/bar::#common-join"></div>
            </div><!-- end container -->
        </section>

        <div th:replace="common/bar::#common-footer"></div>
    </div><!-- end wrapper -->
    <!-- END SITE -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/xtiper.min.js"></script>
    <script src="js/mycustom.js"></script>

</body>
</html>